<template>
	<view class="scroll-pinlun" :style="{height:height+'rpx',bottom:bottom+'rpx'}">
		<scroll-view :scroll-y="true" :style="{height: height+'rpx'}" :scroll-into-view="lastCommentId"
			class="scroll-content">
			<view v-for="(comment, index) in msgList" :key="comment.id" :id="'comment-' + index" class="pinlun-item">
				<view class="inner-content">
					<view style="word-break: break-all" class="text-inner" @click.stop>
						<view class="level">
							<image class="level-icon" style="width: 20rpx;height: 20rpx;"
								src="https://cdn.osisx.com/4a9b62d4e648d1b12bfbef24977042e4/image/2a64a0ec13f143e6bfcb4bbc50cd5734.png"
								mode=""></image>
							{{comment.level}}

						</view>
						<text class="userName" style="word-break: break-all">{{comment.name}}：</text>
						{{ comment.text }}
					</view>
				</view>
			</view>


		</scroll-view>


	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from "vuex";
	export default {
		props: {
			storyId: {
				type: String,
				default: ""
			},
			height: {
				type: Number,
				default: 380
			},
			bottom: {
				type: Number,
				default: 260
			},
			listData: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		computed: {
			...mapState(["curStoryId"]),
		},
		watch: {
			curStoryId: {
				handler(newVal, oldVal) {
					// if (this.storyId == this.curStoryId) {
					// 	if (!this.listData.length) {
					// 		this.renderMsg(this.mockData)
					// 	} else {
					// 		this.renderMsg(this.listData)
					// 	}

					// }
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				msgList: [

				],
				// 到时候通过接口拿
				mockData: [{
						level: 10,
						name: "loong",
						text: "宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊"
					},
					{
						level: 10,
						name: "方震",
						text: "亲个嘴子吧"
					},
					{
						level: 10,
						name: "loong",
						text: "爱你哟"
					},
					{
						level: 10,
						name: "loong",
						text: "巴巴爸爸"
					},
					{
						level: 10,
						name: "loong",
						text: "妈妈"
					},
					{
						level: 10,
						name: "亮哥",
						text: "kkb"
					},
					{
						level: 10,
						name: "loong",
						text: "吧女宝宝"
					},
					{
						level: 10,
						name: "凯哥哥",
						text: "条子来了快跑"
					},
					{
						level: 10,
						name: "loong",
						text: "你真性感"
					},
					{
						level: 10,
						name: "loong",
						text: "宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊"
					},
					{
						level: 10,
						name: "方震",
						text: "亲个嘴子吧"
					},
					{
						level: 10,
						name: "loong",
						text: "爱你哟"
					},
					{
						level: 10,
						name: "loong",
						text: "巴巴爸爸"
					},
					{
						level: 10,
						name: "loong",
						text: "妈妈"
					},
					{
						level: 10,
						name: "亮哥",
						text: "kkb"
					},
					{
						level: 10,
						name: "loong",
						text: "吧女宝宝"
					},
					{
						level: 10,
						name: "凯哥哥",
						text: "条子来了快跑"
					},
					{
						level: 10,
						name: "loong",
						text: "你真性感"
					},
					{
						level: 10,
						name: "loong",
						text: "宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊"
					},
					{
						level: 10,
						name: "方震",
						text: "亲个嘴子吧"
					},
					{
						level: 10,
						name: "loong",
						text: "爱你哟"
					},
					{
						level: 10,
						name: "loong",
						text: "巴巴爸爸"
					},
					{
						level: 10,
						name: "loong",
						text: "妈妈"
					},
					{
						level: 10,
						name: "亮哥",
						text: "kkb"
					},
					{
						level: 10,
						name: "loong",
						text: "吧女宝宝"
					},
					{
						level: 10,
						name: "凯哥哥",
						text: "条子来了快跑"
					},
					{
						level: 10,
						name: "loong",
						text: "你真性感"
					}, {
						level: 10,
						name: "loong",
						text: "宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊"
					},
					{
						level: 10,
						name: "方震",
						text: "亲个嘴子吧"
					},
					{
						level: 10,
						name: "loong",
						text: "爱你哟"
					},
					{
						level: 10,
						name: "loong",
						text: "巴巴爸爸"
					},
					{
						level: 10,
						name: "loong",
						text: "妈妈"
					},
					{
						level: 10,
						name: "亮哥",
						text: "kkb"
					},
					{
						level: 10,
						name: "loong",
						text: "吧女宝宝"
					},
					{
						level: 10,
						name: "凯哥哥",
						text: "条子来了快跑"
					},
					{
						level: 10,
						name: "loong",
						text: "你真性感"
					},
					{
						level: 10,
						name: "loong",
						text: "宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊宝宝宝宝宝宝啊"
					},
					{
						level: 10,
						name: "方震",
						text: "亲个嘴子吧"
					},
					{
						level: 10,
						name: "loong",
						text: "爱你哟"
					},
					{
						level: 10,
						name: "loong",
						text: "巴巴爸爸"
					},
					{
						level: 10,
						name: "loong",
						text: "妈妈"
					},
					{
						level: 10,
						name: "亮哥",
						text: "kkb"
					},
					{
						level: 10,
						name: "loong",
						text: "吧女宝宝"
					},
					{
						level: 10,
						name: "凯哥哥",
						text: "条子来了快跑"
					},
					{
						level: 10,
						name: "loong",
						text: "你真性感"
					},
				],
				lastCommentId: ''
			}
		},
		mounted() {
			// 之后改成直接拿listData


			// this.msgList = this.mockData

			// 测试
			// this.renderMsg(this.mockData)
			// this.handleStartPinLunScroll()

		},
		methods: {
			// 专门提供给外部做启动评论滚动使用
			handleStartPinLunScroll() {
				this.renderMsg(this.mockData)
			},
			renderMsg(results) {
				// let index = 0

				// let interValId = setInterval(()=>{

				// },1000)

				const insertMessage = (index) => {
					if (index < results.length) {
						const result = results[index];
						this.msgList.push(result);
						this.pageToBottom();
						setTimeout(() => insertMessage(index + 1), 1000);
					} else {
						setTimeout(() => insertMessage(0), 1000);
					}
				};

				// 开始插入消息
				insertMessage(0);
			},
			pageToBottom() {
				// setTimeout(() => {
				// 	let lastIndex = this.msgList.length - 1;
				// 	this.$set(this, 'scrollIntoView', 'chatItem_' + lastIndex);
				// 	console.log('scrollIntoView---// 回到底部');
				// }, 300);
				this.$nextTick(() => {
					this.lastCommentId = 'comment-' + (this.msgList.length - 1);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-pinlun {
		position: absolute;
		left: 0;
		width: 100vw;
		z-index: 999;

		.scroll-content {
			padding: 10rpx;
			padding-top: 40rpx;
		}

		.masker {
			position: absolute;
			top: 0rpx;
			left: 0;
			width: 100%;
			height: 50rpx;
			background-color: transparent;

			box-shadow: 0rpx 14rpx 20rpx rgba(0, 0, 0, 0.2);
		}
	}



	.pinlun-item {
		max-width: 80vw;

		.inner-content {
			display: inline-block;
			max-width: 80vw;
			min-width: 20rpx;
			padding: 10rpx;
			border-radius: 15rpx;
			background-color: rgba(0, 0, 0, .5);
			font-size: 24rpx;
			color: #fff;
			margin-bottom: 6rpx;
		}

		.level {
			display: inline-block;
			border-radius: 15rpx;
			background-color: #505f96;
			font-size: 16rpx;
			color: #fff;
			font-weight: 700;
			padding: 5rpx 10rpx;
			margin-right: 10rpx;




			.level-icon {
				width: 20rpx;
				height: 20rpx;
				margin-right: 8rpx;
				vertical-align: middle;

			}

		}

		.userName {
			font-weight: 700;
			color: #85ccd8;


		}

		.text-inner {
			display: inline-block;
			line-height: normal;
			padding: 0;
			margin: 0;
		}
	}
</style>